<template>
	<view class="">
		<health-title @timeBack="timeBack" :borderBottom="false" height="100" Title="心率" :showWeek="false"></health-title>
		<view class="content">
			<view class="">
				<view class="chart-box" style="padding-bottom: 0;">
					<view class="title _df" v-if="!isEmpty">
						<view class="num">
							{{topData.value}}
						</view>
						<view class="dw">
							次/分
						</view>
						<view class="time" v-if="dateType == '日'">
							{{topData.createTime}}
						</view>
					</view>
					
					<view ref="chart" id="chart" class="chart">
						<view class="img" v-if="isEmpty">
							<image src="@/static/img/index/echart.png" mode=""></image>
							<view class="txt">
								暂无数据
							</view>
						</view>
						<l-echart ref="chartRef"></l-echart>
					</view>
					<!-- <echarts-uniapp ref="echarts" :option="option" canvasId="echarts"></echarts-uniapp> -->
					<!-- <echarts ref="echarts" :option="option" canvasId="echarts"></echarts> -->
				</view>
				<view class="box2">
					<view class="title _df _ac">
						<image src="@/static/img/index/tIcon1.png" mode=""></image>
						{{glTitle}}
					</view>
					<view class="list">
						<view class="item">
							<view class="num-box _df">
								<view class="num">
									{{infoData.rest}}
								</view>
								<view class="dw">
									次/分
								</view>
							</view>
							<view class="info">
								静息心率
							</view>
						</view>
						<view class="item">
							<view class="num-box _df">
								<view class="num">
									{{infoData.max}}
								</view>
								<view class="dw">
									次/分
								</view>
							</view>
							<view class="info">
								最高心率
							</view>
						</view>
						<view class="item">
							<view class="num-box _df">
								<view class="num">
									{{infoData.min}}
								</view>
								<view class="dw">
									次/分
								</view>
							</view>
							<view class="info">
								最低心率
							</view>
						</view>
						<view class="item">
							<view class="num-box _df">
								<view class="num">
									{{infoData.avg}}
								</view>
								<view class="dw">
									次/分
								</view>
							</view>
							<view class="info">
								平均心率
							</view>
						</view>
					</view>
				</view>
				<view class="box3 _df _jb _ac" @click="toView">
					<view class="">
						了解心率
					</view>
					<u-icon name="arrow-right" color="#888" size="28"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from "moment";
	export default {
		data() {
			return {
				myChart:null,
				chartInstance: null,
				option: {},
				page:{
					begin: "",
					end: ""
				},
				xData:[],
				yData:[],
				yData2:[],
				format:'HH:mm',
				dateType:'日',
				infoData:{},
				sum:0,
				min:0,
				max:0,
				nowNewsDate:'',
				topData:{
					
				},
				isEmpty:true,
				chartData:{},
				glTitle:'今日概览',
				yMax:150,
				yMin:0,
			}	
		},
		watch:{
			isEmpty(v){
				this.isEmpty = v
			}
		},
		created() {
			
			
		},
		mounted() {
			
		},
		onReady() {
			// this.initChart();
		},
		onLoad() {
			// this.$nextTick(()=>{
			// 	this.initChart2();
			// })
		
			// this.getData()
		},
		onShow() {
		
		},
		
		methods: {
			getData(){
				let that = this
				this.chartData = {}
				uni.$_post({
					url: "getCurrentHeartRate",
					that: that,
					params: that.page,
					success(res) {
						if(res.code == 0){
							// console.log(res)
							let data = res.data;
							that.chartData = res.data.one;
							let yData = res.data.one.dataList
							if(res.data.two){
								that.infoData = res.data.two;
								// that.yMin = res.data.two.min
								// that.yMax = res.data.two.max
							}
							if(res.data.topData.createTime){
								res.data.topData.createTime = uni.$_momentTime(res.data.topData.createTime,'HH:mm')
							}
							if(that.dateType != '日'){
								res.data.topData.value = res.data.two.min + '-' +res.data.two.max
							}
							if(that.dateType == '日'){
								if(that.chartData.dataList[0]){
									that.min = uni.$_momentTime(that.chartData.dataList[0][0])
								}
								that.max = uni.$_momentTime(that.page.begin,'YYYY-MM-DD 23:59:59')
							}else{
								that.min = uni.$_momentTime(that.page.begin,'YYYY-MM-DD HH:mm:ss')
								that.max = uni.$_momentTime(that.page.end,'YYYY-MM-DD HH:mm:ss')
							}
							that.topData = res.data.topData;
							that.initChart(res.data.one);
							
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			toView(){
				uni.navigateTo({
					url:'/pages/comA/details?title=了解心率' + '&type=3695'
				})
			},
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.option)
			},
			timeBack(e) {
				// console.log(e, 666)
				if(e.dateTxt == '周'){
					this.format = 'MM-DD'
					this.glTitle = '本周概览'
				}else if(e.dateTxt == '月'){
					this.format = 'MM-DD'
					this.glTitle = '本月概览'
				}else{
					this.format = 'HH:mm'
					this.glTitle = '今日概览'
				}
				this.dateType = e.dateTxt
				this.page.begin = e.sTime
				this.page.end = e.eTime
				this.getData()
			},
			initChart(chartData) {
				let that = this
				let dataZoom = []
				if(!chartData.dataList || chartData.dataList.length==0) {
					this.isEmpty = true
					this.$refs.chartRef.clear()
					// return	
					dataZoom = []
				}else{
					this.isEmpty = false
					if(this.dateType != '周'){
						dataZoom = [
						    {
						      type: 'inside',
						      start: 0,
						      end: 55,
							  show :false,
							  filterMode: 'filter'
							  
						    },
						    {
						      start: 0,
						      end: 50,
							  show :false,
							  filterMode: 'filter'
						    },
							
						  ]
					}
				}
				let yData = chartData.dataList
				this.option = {
					grid: {
						left: '8%',
						right: '2%',
						bottom: '4%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						triggerOn:'click',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
							label:{
								show: false,
							}
						},
						confine: true,
						formatter: function (params) {
							// params 是一个数组，数组中包含每个系列的数据信息
							let result = '';//收缩压信息窗结果
							let arr = []//总数组
							arr = params
							// console.log(arr,999)
							let valArr = []//收缩压数组
							let newArr = []//收缩压时间相同数组
							let name = ''//时间
							let marker = ''
							let seriesName = ''
							arr.forEach(function (item) {
								// item 是每一个系列的数据
								seriesName = item.seriesName; // 系列名称
								marker = item.marker; // 系列名称
								 // 数据值
								 let value = ''
								if(that.dateType != '日'){
									value = item.value[0].split(' ')[0];
									name = item.value[0].slice(0,10)
								}else{
									value = item.value[0];
									name = uni.$_momentTime(item.value[0],'YYYY-MM-DD HH:mm')
								}
								const value2 = item.value[1] // 数据值
								
								let obj = {
									time:value,
									val:value2
								}
								valArr.push(obj)
								 // 标志图形
								// console.log(value,633)
								result += `${item.marker}${seriesName}: ${value}   ${value2}`;
							});
							let newVal = []
							newArr = valArr.filter((item, index) => valArr.indexOf(item.time) !== index)
							newArr.map(item =>{
								newVal.push(item.val)
							})
							const max = Math.max(...newVal);
							const min = Math.min(...newVal);
							// console.log(valArr,111)
							// console.log(valArr2,222)
							// console.log(newArr,333)
							// console.log(max,'最大')
							// console.log(min,'最小')
							if(arr.length<=2){
								result = `${marker}${seriesName}: ${min}`;
							}else{
								result = `${marker}${seriesName}: ${min}-${max}`;
							}
							return name +'\n' + result;
							
							
						}
					},
					xAxis: {
						show:that.isEmpty?false:true,
						type: 'time',
						boundaryGap: false,
						splitLine: {     
							show: false   //隐藏x轴那条线
						},
						axisPointer: {
							type: 'shadow' // 阴影指示器
						},
						min:that.min,
						max:that.max,
						axisTick: {
							show: false   //隐藏x轴的刻度
						},
						axisLine: {
							show: false   
						},
						axisLabel: {
							showMaxLabel: true,
							interval: 'auto',
							boundaryGap: false,
							textStyle: {
							    color: "#999",
							    fontSize: '10',
							    lineHeight: 36,
							},
						  // 格式化x轴显示
						  formatter: function(value, index) {
						  	return moment(value).format(that.format);
						  }
						},
						// data: xData,
						
					},
					yAxis: {
						type: 'value',
						position: 'right',
						show:that.isEmpty?false:true,
						// max:that.yMax,
						// min:that.yMin,
						max:that.infoData.max +10,
						min:40,
						// interval:30,
						axisLabel: {
							textStyle: {
								color: "#999",
								fontSize: '12',
							},
						},
						axisLine: {
							show: false,
							lineStyle:{
								color:"#999"
							}
						},
						
					},
					color: ['#ff2d3a'],
					dataZoom: dataZoom,
					series: [{
						symbolSize: 5,
						// data: yData,
						// smooth: 0.5,
						name:'心率',
						showSymbol: false,
						data: yData,
						type: 'scatter'
					}]
				};

				this.$refs.chartRef.init(this.$echarts, chart=> {
					chart.setOption(this.option);
				});
				setTimeout(()=>{
					that.$refs.chartRef.setOption(that.option)
				},200)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx 100rpx;
		.box2{
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.08); 
			padding: 40rpx 30rpx 10rpx;
			margin-bottom: 30rpx;
			.title{
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #eee;
				color: #171717;
				font-family: $uni-font-family-Bold;
				font-size: 28rpx;
				image{
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
			}
			.list{
				padding-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				.item{
					width: 50%;
					padding-left: 50rpx;
					padding-top: 10rpx;
					box-sizing: border-box;
					margin-bottom: 50rpx;
					position: relative;
					&::before{
						display: block;
						content: '';
						width: 1rpx;
						height: 70rpx;
						background-color: #e2e2e2;
						position: absolute;
						top: 50%;
						right: 0;
						margin-top: -35rpx;
					}
					.num-box{
						height: 58rpx;
						line-height: 58rpx;
						font-family: $uni-font-family-Bold;
						font-size: 50rpx;
						color: #171717;
						margin-right: 4rpx;
						.dw{
							font-size: 24rpx;
							line-height: 70rpx;
						}
					}
					.info{
						height: 48rpx;
						line-height: 48rpx;
						font-family: $uni-font-family-Medium;
						font-size: 24rpx;
						color: #222;
					}
				}
				.item:nth-child(2),
				.item:nth-child(4){
					&::before{
						display: none;
					}
				}
			}
		}
		.box3{
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.10); 
			height: 130rpx;
			padding: 0 30rpx;
			color: #222;
			font-family: $uni-font-family-Bold;
			font-size: 28rpx;
		}
	}
</style>